<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">
    <link href="../lib/icons.css" rel="stylesheet">

    <title>Test Treeview - Metro UI :: Popular HTML, CSS and JS library</title>
    <style>
        #tv .current::before {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            background: lightcyan;
            height: 24px;
            top: 0;
            right: 0;
            bottom: 0;
        }

        #tv > li > ul > li > ul > .current::before {
            left: -56px;
        }

        #tv > li > ul > .current::before {
            left: -40px;
        }

        #tv > .current::before {
            left: -24px;
        }
    </style>
</head>
<body class="cloak">
<nav data-role="appbar">
    <span class="app-bar-item">Treeview</span>
    <div class="app-bar-item no-hover">
        <input type="checkbox" data-role="theme-switcher" data-state="dark"/>
    </div>
</nav>
<div class="container">
    <h1>Treeview test page</h1>
    <div class="example" style="width: 360px;">
        <ul data-role="treeview" class="border" id="tv">
            <li data-icon="<span class='mif-star-full fg-red'>" data-caption="Favorites">
                <ul>
                    <li data-icon="<span class='mif-library fg-green'>" data-caption="Projects"></li>
                    <li data-icon="<span class='mif-download fg-cyan'>" data-caption="Downloads"></li>
                    <li data-icon="<span class='mif-apps'>" data-caption="Desktop"></li>
                </ul>
            </li>
            <li data-icon="<span class='mif-onedrive'>" data-caption="OneDrive">
                <ul>
                    <li data-caption="Documents"></li>
                    <li data-caption="Projects" data-icon="<span class='mif-apps'>">
                        <ul>
                            <li data-caption="Web"></li>
                            <li data-caption="Android"></li>
                            <li data-caption="Windows" data-collapsed="true">
                                <ul>
                                    <li data-caption="Windows 95"></li>
                                    <li data-caption="Windows 98"></li>
                                    <li data-caption="Windows XP"></li>
                                    <li data-caption="Windows ME"></li>
                                </ul>
                            </li>
                            <li data-caption="iOS"></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <br>

    <div class="example">
        <ul data-role="treeview" id="tv1" class="auto-layout">
            <li>
                <input type="checkbox" data-role="checkbox" data-append="Play video" title="" data-three-state="true">
                <ul>
                    <li><input type="checkbox" data-role="checkbox" data-append="AVI" title=""></li>
                    <li><input type="checkbox" data-role="checkbox" data-append="MPEG" title=""></li>
                    <li><input checked type="checkbox" data-role="checkbox" data-append="VIDX" title=""></li>
                    <li><input type="checkbox" data-role="checkbox" data-append="MP4" title=""></li>
                    <li><input checked type="checkbox" data-role="checkbox" data-append="XVID" title=""></li>
                </ul>
            </li>
            <li><input type="checkbox" data-role="checkbox" data-append="Play audio" title=""></li>
            <li>
                <input type="checkbox" data-role="checkbox" data-append="Subtitles" title="">
                <ul>
                    <li><input type="checkbox" data-role="checkbox" data-append="English" title=""></li>
                    <li><input checked type="checkbox" data-role="checkbox" data-append="Ukrainian" title=""></li>
                    <li><input type="checkbox" data-role="checkbox" data-append="Dutch" title=""></li>
                </ul>
            </li>
        </ul>
    </div>

</div>

<script src="../lib/metro.js"></script>
<script>
    ;
</script>
</body>
</html>
